<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Create New Host User</title>
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/date.js" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$.validator.addMethod("checkDate", function(value, element) {
		//return value.match(/^\d\d\d\d?\-\d\d?\-\d\d$/);
		return Date.parseExact(value, "yyyy-M-d");
	}, "Please enter a date in the format yyyy-mm-dd.");
	$(document).ready(function() {
		$("#hostRegister").validate({
			errorElement : "span",
			rules : {
				rePwd : {
					equalTo : "#password"
				},
				rePhoneNumber : {
					equalTo : "#phoneNumber"
				},
				birthday : {
					checkDate : true
				}
			}
		});
	});
</script>
</head>
<body>
	<div id="header"></div>
	<script>
		$('#header').load('header.html');
	</script>
	<!-- call header -->
	<div id="wrap">
		<div id="content_container">
			<div id="content_wrap">
				<div id="content" class="clr">
					<h2>Become a Host family</h2>
					<br>
					<br>
					<form id="hostRegister" method="post" action="CreateHostUser">
						<label>User Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="userName"><br>
						<br> <label>Password<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" minlength="6" type="password"
							id="password" name="pwd"><br>
						<br> <label>Re-enter Password<span class="rq">
								* </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
							class="required" type="password" name="rePwd"><br>
						<br> <label>First Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="firstName"><br>
						<br> <label>Last Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="lastName"><br>
						<br> <label>Sex</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select name="sex">
							<option value="1" selected>Male</option>
							<option value="2">Female</option>
						</select><br>
						<br> <label>Birthday<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="date1" type="text" name="birthday"
							value="yyyy-MM-dd"><br>
						<br> <label>Phone Number<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="digits" minlength="10" maxlength="11" type="text"
							id="phoneNumber" name="phoneNumber"><br>
						<br> <label>Re-enter Phone Number<span class="rq"> * </span></label>
						<input class="required" type="text" name="rePhoneNumber"><br>
						<br> <label>Email<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required email" type="text" name="email"><br>
						<br> <input type="submit" value="Register" name="register"><br>
						<br>

					</form>
					<div id="footer"></div>
					<script>
						$('#footer').load('footer.html');
					</script>
					<!-- call footer -->
				</div>
				<!--content -->
			</div>
			<!--content_wrap -->
		</div>
		<!--content container -->
	</div>
	<!--end_wrap -->
</body>
</html>